<!-- 剪切板按钮 -->
<template>
    <div ref="clipboardButtonRef" @click="onCopy">
        <el-tooltip
            v-model:visible="tooltipVisible"
            trigger="click"
            effect="dark"
            placement="top"
            :disabled="tipType !== 'tooltip'"
            :content="tooltipContent"
            :popper-class="[
                'clipboard-tooltip',
                (tooltipType === 'success' ? 'success-tooltip' : ''),
                (tooltipType === 'error' ? 'error-tooltip' : '')
            ].join(' ')"
        >
            <slot></slot>
        </el-tooltip>
    </div>
</template>

<script>
import { defineComponent, toRefs, ref } from 'vue'
import { ElMessage } from 'element-plus'
import ClipboardJS from 'clipboard'
export default defineComponent({
    name: 'ClipboardButton',
    props: {
        // 要复制的内容文本
        content: {
            type: String,
            default: ''
        },
        // 提示类型(tooltip、message)
        tipType: {
            type: String,
            default: 'tooltip'
        }
    },
    setup(props) {
        const { content, tipType } = toRefs(props)

        const clipboardButtonRef = ref(null)
        
        const tooltipVisible = ref(false)
        const tooltipContent = ref('')
        const tooltipType = ref('')
        let tooltipTimer = null

        const onCopy = event => {
            const clipboard = new ClipboardJS(clipboardButtonRef.value, {
                text: () => content.value,
                container: clipboardButtonRef.value // 设为焦点元素，避免在其他改变焦点的库中使用
            })

            clipboard.on('success', e => {
                if (tipType.value === 'tooltip') {
                    tooltipVisible.value = true
                    tooltipContent.value = '复制成功'
                    tooltipType.value = 'success'
                    if (!!tooltipTimer) clearTimeout(tooltipTimer)
                    tooltipTimer = setTimeout(() => {
                        tooltipVisible.value = false
                        tooltipContent.value = ''
                        tooltipType.value = ''
                    }, 1000)
                }
                else if (tipType.value === 'message') {
                    ElMessage({
                        message: '复制成功',
                        type: 'success',
                        grouping: true
                    })
                }

                // 释放内存
                clipboard.destroy()
            })
            clipboard.on('error', e => {
                if (tipType.value === 'tooltip') {
                    tooltipVisible.value = true
                    tooltipContent.value = '复制失败'
                    tooltipType.value = 'error'
                    if (!!tooltipTimer) clearTimeout(tooltipTimer)
                    tooltipTimer = setTimeout(() => {
                        tooltipVisible.value = false
                        tooltipContent.value = ''
                        tooltipType.value = ''
                    }, 1000)
                }
                else if (tipType.value === 'message') {
                    ElMessage({
                        message: '复制失败',
                        type: 'error',
                        grouping: true
                    })
                }

                // 释放内存
                clipboard.destroy()
            })
            clipboard.onClick(event)
        }

        return {
            tipType,
            clipboardButtonRef,

            tooltipVisible,
            tooltipContent,
            tooltipType,

            content,
            onCopy
        }
    }
})
</script>

<style lang="less">
.el-popper.clipboard-tooltip.success-tooltip {
    background-color: var(--edit-color-success-light-9);
    border-color: var(--edit-color-success-light-8);
    color: var(--edit-color-success);
}
.el-popper.clipboard-tooltip.success-tooltip .el-popper__arrow::before {
  background-color: var(--edit-color-success-light-9);
  border-color: var(--edit-color-success-light-8);
}

.el-popper.clipboard-tooltip.error-tooltip {
    background-color: var(--edit-color-error-light-9);
    border-color: var(--edit-color-error-light-8);
    color: var(--edit-color-error);
}
.el-popper.clipboard-tooltip.error-tooltip .el-popper__arrow::before {
  background-color: var(--edit-color-error-light-9);
  border-color: var(--edit-color-error-light-8);
}
</style>